<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>邯郸微购物</title>
	<meta name="decorator" content="default"/>
	<meta name="full-screen" content="yes">
	<meta name="viewport" 	content="width=device-width initial-scale=1.0  maximum-scale=1.0">
	<link rel="stylesheet"  href="${ctxStatic }/jquery-mobile/1.4/jquery.mobile-1.4.0-alpha.1.min.css">
	<link rel="stylesheet" href="${ctxStatic }/jquery-mobile/1.4/grid-listview.css">
	<script src="${ctxStatic }/jquery-mobile/1.4/jquery.mobile-1.4.0-alpha.1.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			document.title = "邯郸微购物";
		});
		
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
		
		function showDetail(id){
			var flag = $('#'+id).css("display");
			
			if( flag ===  'block'){
				$('#'+id).hide();
			}else{
				$('#'+id).show();
			}
		}

	</script>
</head>
<body>

	<div data-role="page" data-theme="a" id="demo-page" class="my-page" style="margin: 0px; padding: 0px;width:100%" >
		<form id="searchForm" action="${ctxFront }/wechat/product/"
			method="post" class="breadcrumb form-search">
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
			<input id="pageSize" name="pageSize" type="hidden"
				value="${page.pageSize}" />
			<input id="category" name="category" type="hidden" value="${category}" />
			<input id="subCategory" name="subCategory" type="hidden" value="${subCategory}" />
			<ul data-role="listview" data-inset="true"
				style="margin: 0px; padding: 0px;width:100%">
				<c:forEach items="${page.list}" var="product">
					<li><a href="javascript:showDetail('detail-${product.id }');">
							<img src="${ctxRoot }/userfiles/product/${product.pic}"
							style="margin-top: 10px; margin-bottom: 0px; width: 100px; height: 100%" />
							<h2>${product.name}</h2>
							<p>${product.description}</p>
							<p class="ui-li-aside" style="display: none">0人</p>
					</a></li>
					<ul id="detail-${product.id }" style="display: none">
						<li style="list-style-type: none;color:red">${product.detail }</li>
						<c:if test="${product.url ne '' }">
							<li style="list-style-type: none;" align="center" ><a href="${product.url }" style="color: white;"  class="btn btn-large btn-danger">去获得优惠券</a></li>
						</c:if> 
						
					</ul>

				</c:forEach>
			</ul>
		</form>
		<div class="pagination">${pagination }</div>
	</div>
</body>
</html>
